<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:p="http://primefaces.org/ui"
	xmlns:pe="http://primefaces.org/ui/extensions">

<ui:composition template="/templates/template.xhtml">
	<ui:define name="content">
		<h:form id="formConsulta">
			<p:growl id="mensagens" life="#{msg.time_stick}" />

			<p:panel id="painel">
				<f:facet name="header">
					<div align="left">
						<h:outputText value="Cadastro / Alteração - Consulta"
							styleClass="tituloPainelInterno" />
					</div>
				</f:facet>

				<p:tabView id="abas" style="height:100%">
				<p:ajax listener="#{historicoFaces.buscarProcedimentos}" event="tabChange" update="@form" />
				
					<p:tab title="Dados Cadastrais" id="abaCadastro">
						<table width="100%">
							<tr>
								<td valign="top" width="50%">
									<p:panel header="Proprietário" 	id="painelProprietario" style="height:200px;">
										<f:facet name="actions">
											<p:commandLink styleClass="ui-icon ui-icon-search"
												style="float:right;"
												actionListener="#{proprietarioFaces.selecionarProprietario()}"
												title="Selecionar Proprietario"
												disabled="#{consultaFaces.consulta.id != null}">
												<p:ajax event="dialogReturn"
													listener="#{consultaFaces.retornoProprietario}"
													update="abas" />
											</p:commandLink>
										</f:facet>

										<table width="100%">
											<tr>
												<td width="20%"><h:outputText value="Nome " />
												</td>

												<td><p:autoComplete
														value="#{consultaFaces.consulta.proprietario}" id="prop"
														completeMethod="#{proprietarioFaces.autoComplete}"
														var="entidade" itemLabel="#{entidade.nome}"
														itemValue="#{entidade}" converter="converterGeral"
														forceSelection="true"
														disabled="#{consultaFaces.consulta.id != null}">
														<p:ajax event="itemSelect"
															update="painelProprietario painelAnimal"
															listener="#{consultaFaces.limparSelecaoAnimal()}" />
													</p:autoComplete></td>
											</tr>

											<h:panelGroup
												rendered="#{consultaFaces.consulta.proprietario != null}">
												<tr>
													<td><h:outputText value="Endereço " /></td>

													<td><p:inputText
															value="#{consultaFaces.consulta.proprietario.endereco}, #{consultaFaces.consulta.proprietario.numero} #{consultaFaces.consulta.proprietario.complemento}"
															readonly="true" style="width:99%;max-width:99%;" /></td>
												</tr>
												<tr>
													<td><h:outputText value="Observações " /></td>
													<td><p:inputTextarea id="observacao" rows="5"
															autoResize="true"
															value="#{consultaFaces.consulta.proprietario.observacao}"
															style="width:99%;max-width:99%;height:75px;max-height:100px;"
															readonly="true" /> 
													<p:tooltip for="observacao"
															value="#{consultaFaces.consulta.proprietario.observacao}"
															style="width:400px" styleClass="textoToolTip"/></td>
												</tr>
											</h:panelGroup>
										</table>

									</p:panel></td>

								<td valign="top">
									<p:panel header="Animal" id="painelAnimal" style="height:200px;">
										<f:facet name="actions">
											<p:commandLink styleClass="ui-icon ui-icon-search"
												style="float:right;"
												disabled="#{consultaFaces.consulta.proprietario == null or consultaFaces.consulta.id != null}"
												actionListener="#{consultaFaces.selecionarAnimal}"
												title="Selecionar Animal">
												<p:ajax event="dialogReturn"
													listener="#{consultaFaces.retornoAnimal}" update="anim" />
											</p:commandLink>
										</f:facet>

										<table width="100%">
											<tr>
												<td width="20%"><h:outputText value="Nome " /></td>

												<td><p:autoComplete
														value="#{consultaFaces.consulta.animal}" id="anim"
														completeMethod="#{consultaFaces.autoCompleteAnimal}"
														var="entidade" itemLabel="#{entidade.nome}"
														itemValue="#{entidade}" converter="converterGeral"
														forceSelection="true"
														disabled="#{consultaFaces.consulta.proprietario == null or consultaFaces.consulta.id != null}">
														<p:ajax event="itemSelect" update="painelAnimal" />
													</p:autoComplete></td>
											</tr>

											<h:panelGroup rendered="#{consultaFaces.consulta.animal != null}">
												<tr>
													<td><h:outputText value="Raça " /></td>

													<td><p:inputText
															value="#{consultaFaces.consulta.animal.raca.nome}"
															readonly="true" style="width:100%" /></td>
												</tr>
												<tr>
													<td><h:outputText value="Espécie " /></td>

													<td><p:inputText
															value="#{consultaFaces.consulta.animal.especie.especie}"
															readonly="true" style="width:100%" /></td>
												</tr>
											</h:panelGroup>
										</table>
									</p:panel></td>
							</tr>
						</table>
						<p:spacer height="10px" />

						<div align="center">
							<p:commandButton value="Voltar" id="voltarConsulta"
								action="#{consultaFaces.voltarConsulta()}"
								icon="imgVoltar" styleClass="textoToolTip"
							/>
							<p:tooltip value="Buscar consultas" for="voltarConsulta" styleClass="textoToolTip"/>

							<p:commandButton value="Salvar" id="salvarConsulta"
								actionListener="#{consultaFaces.adicionarEditar()}"
								icon="imgSalvar" update="abas :formConsulta:mensagens" />
							<p:tooltip value="Salvar Consulta" for="salvarConsulta" styleClass="textoToolTip"/>
						</div>
					</p:tab>

					<p:tab disabled="#{consultaFaces.consulta.id == null}" id="abaProcedimento">
						<f:facet name="title">
							<h:outputText value="Procedimentos" id="tituloProcedimentos" />
							<p:tooltip for="tituloProcedimentos" styleClass="textoToolTip"
								value="Adicionar procedimentos realizados para o proprietário : #{procedimentoConsultaFaces.consulta.proprietario.nome} 
								e para o animal: #{procedimentoConsultaFaces.consulta.animal.nome}" />
						</f:facet>
						<h:panelGroup id="procedimentos">
							<p:panel header="Incluir Procedimento">
								<table width="60%" class="colunaLinhaUnica">
									<tr>
										<td align="left"><h:outputText value="Procedimento *" />
										</td>
										<td>
										<p:autoComplete
												value="#{procedimentoConsultaFaces.procedimento.procedimento}"
												completeMethod="#{procedimentoFaces.autoComplete}"
												var="entidade" itemLabel="#{entidade.nome}"
												itemValue="#{entidade}" converter="converterGeral"
												forceSelection="true" id="proc">
												<p:ajax event="itemSelect" update="procedimentos"
													listener="#{procedimentoConsultaFaces.popularDadosProcedimento()}" />
											</p:autoComplete></td>
										<td><p:commandLink styleClass="ui-icon ui-icon-search"
												actionListener="#{procedimentoFaces.exibirDialogProcedimento()}"
												title="Selecionar Procedimento">
												<p:ajax event="dialogReturn"
													listener="#{procedimentoConsultaFaces.retornoProcedimento}"
													update="procedimentos" />
											</p:commandLink></td>
									</tr>

									<tr>
										<td align="left"><h:outputText
												value="Data procedimento *" /></td>
										<td><p:calendar
												value="#{procedimentoConsultaFaces.procedimento.dataProcedimento}"
												pattern="#{msg.masc_dataComHora}"
												locale="#{msg.locale_calendar}"
												timeZone="#{msg.local_timezone}" navigator="true"
												yearRange="c-1:c+1" showButtonPanel="true" /></td>
										<td align="left"><h:outputText value="Data retorno" /></td>
										<td><p:calendar
												value="#{procedimentoConsultaFaces.procedimento.dataRetorno}"
												pattern="#{msg.masc_dataComHora}"
												locale="#{msg.locale_calendar}"
												timeZone="#{msg.local_timezone}" navigator="true"
												yearRange="c-1:c+1" showButtonPanel="true" /></td>
										<td><h:outputText value="Peso do animal" /></td>
										<td><pe:inputNumber
												value="#{procedimentoConsultaFaces.procedimento.pesoAnimal}"
												thousandSeparator="." decimalSeparator="," id="pesoAnimal">
											</pe:inputNumber></td>
									</tr>

									<tr>
										<td align="left"><h:outputText value="Valor total" /></td>
										<td><pe:inputNumber
												value="#{procedimentoConsultaFaces.procedimento.totalProcedimento}"
												symbol="R$ " thousandSeparator="." decimalSeparator=","
												id="valorTotal">
												<p:ajax event="blur"
													listener="#{procedimentoConsultaFaces.calculaValor()}"
													update="percent liquido" />
											</pe:inputNumber></td>
										<td align="left"><h:outputText value="Comissão" /></td>
										<td><pe:inputNumber
												value="#{procedimentoConsultaFaces.procedimento.porcentagem}"
												symbol=" %" symbolPosition="right" thousandSeparator="."
												decimalSeparator="," id="percent">
												<p:ajax event="blur"
													listener="#{procedimentoConsultaFaces.calculaValor()}"
													update="liquido" />
											</pe:inputNumber></td>
										<td align="left"><h:outputText value="Valor líquido" />
										</td>
										<td><pe:inputNumber
												value="#{procedimentoConsultaFaces.procedimento.totalLiquido}"
												symbol="R$ " thousandSeparator="." decimalSeparator=","
												id="liquido">
												<p:ajax event="blur"
													listener="#{procedimentoConsultaFaces.calcularPorcentagem()}"
													update="percent" />
											</pe:inputNumber></td>
									</tr>

									<tr>
										<td valign="bottom"><h:outputText value="Observações" />
										</td>
										<td colspan="3">
											<p:inputTextarea 
												rows="5"
												autoResize="true" id="observ"
												value="#{procedimentoConsultaFaces.procedimento.observacao}"
												style="width:98%;max-width:99%;height:50px;max-height:100px;" 
												maxlength="300"
												/>
										</td>
									</tr>
									<tr>
										<td valign="bottom"><h:outputText value="Anamnese"  
											rendered="#{procedimentoConsultaFaces.exibirAnamnese}"/>
										</td>
										<td colspan="3">
											<p:inputTextarea rows="5"
												autoResize="true" id="anamnese"
												value="#{procedimentoConsultaFaces.procedimento.anamnese}"
												style="width:98%;max-width:99%;height:50px;max-height:100px;" 
												maxlength="1000"
												rendered="#{procedimentoConsultaFaces.exibirAnamnese}"
												
												/>
										</td>
									</tr>
								</table>
							</p:panel>
							<p:spacer height="10px" />
							<div align="center">
								<p:commandButton value="Voltar" id="voltarProcedimento"
									action="#{consultaFaces.voltarConsulta()}"
									icon="imgVoltar" />
								<p:tooltip for="voltarProcedimento" value="Buscar consultas" styleClass="textoToolTip"/>

								<p:commandButton value="Adicionar"
									actionListener="#{procedimentoConsultaFaces.adicionarProcedimento()}"
									title="Adicionar Procedimento" icon="imgAdicionar"
									update=":formConsulta:mensagens procedimentos"
									id="adicionarProcedimento" />
								<p:tooltip for="adicionarProcedimento" styleClass="textoToolTip" value="Adicionar Procedimento" />
							</div>
						</h:panelGroup>
					</p:tab>
					
					<p:tab title="" disabled="#{consultaFaces.consulta.id == null}" id="abaHistorico">
						<f:facet name="title">
							<h:outputText value="Histórico" id="tituloHistorico" />
							<p:tooltip for="tituloHistorico" styleClass="textoToolTip"
								value="Histórico geral de atendimentos." />
						</f:facet>
						
						
						<h:outputText value="Não existem procedimentos cadastrados" rendered="#{historicoFaces.historicoTable.size() == 0}"/>
					
						<p:accordionPanel dynamic="true" cache="true" var="itemHistorico" activeIndex="0"
							value="#{historicoFaces.historicoTable}" >
							<p:tab id="formTab" title="#{itemHistorico.ano}">
								<p:dataTable var="historico"
									value="#{itemHistorico.listaHistorico}"
									styleClass="tabelaCompleta colunaLinhaUnica"
									emptyMessage="Não há registros."
									rowStyleClass="#{empty rowIx or rowIx mod 2 ne 0 ? 'even-row' : 'odd-row'}"
									rowIndexVar="rowIx">

									<p:columnGroup type="header">
										<p:row>
											<p:column headerText="Procedimento" />
											<p:column headerText="Total procedimento (R$)" />
											<p:column headerText="Total líquido (R$)" />
											<p:column headerText="Observação" />
											<p:column headerText="Data retorno" />
										</p:row>
									</p:columnGroup>
									<p:subTable var="procedimento"
										value="#{historico.listaProcedimentos}">
										<f:facet name="header">
											<h:outputText value="Data do procedimento: " />
											<h:outputText value="#{historico.dataProcedimento}">
												<f:convertDateTime pattern="#{msg.masc_dataSemHora}"
													locale="#{msg.locale_calendar}"
													timeZone="#{msg.local_timezone}" />
											</h:outputText>
										</f:facet>
										<p:column headerText="Procedimento">
											<h:outputText value="#{procedimento.procedimento.nome}" />
										</p:column>
										<p:column headerText="Total procedimento">
											<h:outputText value="#{procedimento.totalProcedimento}">
												<f:convertNumber minFractionDigits="2" currencySymbol="R$ "
													type="currency" />
											</h:outputText>
										</p:column>
										<p:column headerText="Total líquido">
											<h:outputText value="#{procedimento.totalLiquido}">
												<f:convertNumber minFractionDigits="2" currencySymbol="R$ "
													type="currency" />
											</h:outputText>
										</p:column>
										<p:column headerText="Observação">
											<h:outputText value="#{procedimento.observacao}" id="obs" />
											<p:tooltip for="obs" value="#{procedimento.observacao}"
												styleClass="textoToolTip" />
										</p:column>
										<p:column headerText="Data retorno">
											<h:outputText value="#{procedimento.dataRetorno}">
												<f:convertDateTime pattern="#{msg.masc_dataComHora}"
													locale="#{msg.locale_calendar}"
													timeZone="#{msg.local_timezone}" />
											</h:outputText>
										</p:column>

										<p:columnGroup type="footer">
											<p:row>
												<p:column footerText="Total: " style="text-align:right" />
												<p:column footerText="#{historico.valorTotalBrutoDia}" />
												<p:column footerText="#{historico.valorTotalLiquidoDia}" />
												<p:column footerText="" />
												<p:column footerText="" />
											</p:row>
										</p:columnGroup>
									</p:subTable>
								</p:dataTable>
							</p:tab>

						</p:accordionPanel>


						<p:spacer height="10px" />
						<div align="center">
							<p:commandButton value="Voltar" id="buscarHistorico"
								action="#{consultaFaces.voltarConsulta()}" icon="imgVoltar" />
							<p:tooltip for="buscarHistorico" value="Buscar consultas" styleClass="textoToolTip"/>
						</div>

					</p:tab>

				</p:tabView>
			</p:panel>

		</h:form>
	</ui:define>
</ui:composition>
</html>